プラン設定機能追加 #19
プラン設定機能追加 #19
Conversation
SasakiTakatsugu
requested review from
KooriyamaHiroki,
bigdragon0610,
Copilot and
silent-bayline
There was a problem hiding this comment.
Pull Request Overview
This PR adds a plan settings feature that allows users to manage tenant pricing plans. The changes include adding a navigation link to plan settings from user pages and implementing a comprehensive plan settings page with support for plan changes, cancellations, and reservations.
- Adds "プラン設定" (Plan Settings) link to UserPage
- Implements a new PlanSettings page with plan management functionality
- Refactors utility functions to be more generic and reusable
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils.ts | Refactored handleUserListClick to navigateToUserPageByRole with improved error handling and generic parameters |
| src/types/index.ts | Added PlanReservation interface and updated Tenant interface with plan reservation fields |
| src/types/billing.ts | Updated TaxRate interface and added PlanInfo, PricingPlan, PricingMenu, and PricingUnit interfaces |
| src/pages/UserPage.tsx | Added link to plan settings page |
| src/pages/TenantList.tsx | Updated to use refactored navigation function |
| src/pages/PlanSettings.tsx | New comprehensive plan settings page with full CRUD functionality |
| src/pages/BillingDashboard.tsx | Updated imports and function calls to use refactored navigation |
| src/App.tsx | Added route for the new plan settings page |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
src/pages/PlanSettings.tsx
Outdated
| </select> | ||
| </div> | ||
|
|
||
| {/* 反映び */} |
There was a problem hiding this comment.
「反映び」は誤字です。「反映日」に修正してください。
| {/* 反映び */} | |
| {/* 反映日 */} |
src/pages/PlanSettings.tsx
Outdated
|
|
||
| // カスタム日時が指定されている場合のみ using_next_plan_from を設定 | ||
| if (usingNextPlanFrom === "custom" && customDate) { | ||
| updateData.using_next_plan_from = Math.floor(new Date(customDate).getTime() / 1000); |
There was a problem hiding this comment.
customDateが空文字列の場合、new Date('')は無効な日付となりNaNが返されます。customDateの妥当性チェックを追加してください。
| updateData.using_next_plan_from = Math.floor(new Date(customDate).getTime() / 1000); | |
| const date = new Date(customDate); | |
| if (!isNaN(date.getTime())) { | |
| updateData.using_next_plan_from = Math.floor(date.getTime() / 1000); | |
| } |
src/pages/PlanSettings.tsx
Outdated
| const showError = (message: string) => { | ||
| alert(message); // 後でトーストやモーダルに置き換え可能 | ||
| }; |
There was a problem hiding this comment.
[nitpick] alert()の使用はユーザーエクスペリエンスが良くありません。既存のモーダルパターンやトーストライブラリを使用することを検討してください。
src/pages/PlanSettings.tsx
Outdated
| setDateValidationError(`5分後の日時より前は選択できません。${minDateString}に設定しました。`); | ||
| // 3秒後にエラーメッセージを消す | ||
| setTimeout(() => setDateValidationError(""), 3000); |
There was a problem hiding this comment.
setTimeoutのクリーンアップが実装されていません。コンポーネントがアンマウントされた際にタイマーをクリアするか、useEffectでクリーンアップ関数を設定してください。
| await axios.put( | ||
| `${API_ENDPOINT}/tenants/${tenantId}/plan`, | ||
| {}, | ||
| { | ||
| headers: getActionHeaders("reservation_cancel"), | ||
| withCredentials: true, | ||
| } | ||
| ); |
There was a problem hiding this comment.
[nitpick] 空のリクエストボディ{}で予約取り消しを行うのは直感的ではありません。より明示的なAPI設計（DELETEメソッドやcancel: trueフラグなど）を検討してください。
|
同機能修正 |
・ユーザー一覧へプラン設定へのリンク追加
・プラン設定画面を追加